<template>
	<el-drawer title="请点击选择上传目录" :visible.sync="drawer" direction="ltr" ref="tclb" width="20%" :before-close="close"
		:append-to-body="true">
		<el-button style="float:right;margin-right: 10px;" @click="refsh" type="primary" size="medium"
		 plain
		>刷新</el-button>
		<div class="tree-container mt10">
			<el-tree :data="treedata" :props="treeProps" :load="loadNode" lazy v-model="checkedNodes"
				@node-click="handleNodeClick"
				 />
		</div>
		<div class="demo-drawer__footer">
			<el-button @click="drawer = false">取 消</el-button>
			<el-button type="primary" @click="handleConfirm">确定</el-button>
		</div>
	</el-drawer>
</template>

<script>
import { getTreeDataList } from "@/api/knowledge/diretory";
import store from "@/store";

export default {
	name: 'DiretorySelect',
	props: {},
	data() {
		return {
			drawer: false,
			curItem: null,
			treedata: [],
			checkedNodes: [],
			fileBussinessTypeCode: "111",
			fileBusinessTypeId: "111",
			treeProps: {
				label: `name`,
				children: `children`, // 显示子节点的字段名
				isLeaf: (node) => !node.isParent && !node.children,
			},
		}
	},
	mounted() {
		this.curItem = null;
		this.getTreeData();
	},
	methods: {
		open() {
			this.drawer = true;
		},
		close() {
			this.drawer = false;
			this.curItem = null
		},
		handleConfirm() {
			if (!this.curItem) {
				this.$message.error('请选择一条数据')
				return
			}
			this.$emit('onChange', { ...this.curItem })
			this.close()
		},

		handleNodeClick(data, b, c) {
			this.curItem = data;
		},

		getTreeData() {
			const params = {
				userId: store.getters.user_id.toString(),
				token: store.getters.token.toString(),
				userName: store.getters.userName.toString(),
				data: {
					fileBussinessTypeCode: this.fileBussinessTypeCode,
					fileDiretoryId: null,
				},
			};
			getTreeDataList(params).then((data) => {
				if (data.result === true) {
					this.treedata = data.resultdata.data;
					const [treeItem] = this.treedata
					const items = [];
					data.resultdata.data.forEach(function (obj) {
						items.push({
							label: obj.name,
							id: obj.id,
						});
					});
				}
				else {
					this.$message({
						type: `warning`,
						message: `获取信息出错`,
					});
				}
			});
		},
		// 懒加载树
		// tree的懒加载数据
		loadNode(node, resolve) {
			this.isLeaf = node.isLeaf;
			if (node.level === 0) {
				return resolve(this.treedata);
			}
			if (node.level > 9999) return resolve([]);
			// 请求子节点数据
			const params = {
				userId: store.getters.user_id.toString(),
				token: store.getters.token.toString(),
				userName: store.getters.userName.toString(),
				data: {
					fileBussinessTypeCode: this.fileBussinessTypeCode,
					fileDiretoryId: node.data.id,
				},
			};
			getTreeDataList(params).then((data) => {
				if (data.result === true) {
					// 将新获取的数据合并到当前节点的children中
					node.childNodes = [...node.childNodes, ...data.resultdata.data];
					// 返回updatedChildren用于更新节点的children字段
					const updatedChildren = node.childNodes.map((child) => {
						child.checked =
							this.checkable &&
							this.checkedNodes.some((node) => node.id === child.id);
						return child;
					});
					resolve(updatedChildren);
				}
				else {
					this.$message({
						type: `warning`,
						message: `获取信息出错`,
					});
				}
			});
		},
		refsh(){
			this.$nextTick(() => {
          this.treedata = [];
        })
        this.getTreeData();
		},
	},
}
</script>

<style scoped>
.tree-container {
	height: calc(100vh - 160px);
	padding: 16px;
	overflow: auto;
	height: 800px;
	min-width: 100%;
}

.el-tree {
	min-width: 100%;
	height: calc(100% - 150px);
	display: inline-block;
}

.demo-drawer__footer .el-button {
	width: 270px;
	height: 35px;
	margin-left: 5px;
	margin-bottom: 10px;
}
</style>